<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Untitled Document</title>
	<style>
		body{
			font-size:9pt;
		}
		#panel1{
			border:1px #000000 solid;
			line-height:400px;
			font-size:100px;
			width:400px;
			height:400px;
			text-align:center;
			vertical-align:middle;		
		}
	</style>
	
	<script  type="text/javascript" src="../libs/jquery-1.7.1.min.js"></script>
	<script type="text/javascript" >
		var $panel1;
		var nTimerID;
		var labTotal;
		var nTotalMember;
	//1.	
		$(document).ready(function(){
			// 요소 초기화 실행.	
			init();
			// 이벤트 초기화 실행.
			initEventListener();
		
		});
		
		// 요소 초기화.
		function init(){
	//2.		
			// 숫자가 출력될 #panel1을 찾아 전역변수에 담아둡니다.
			this.$panel1 = $("#panel1");
			this.nTimerID = 0;
			// 참여인원 정보가 입력된 패널을 찾아 전역변수에 담아둡니다.
			this.$labTotal = $("#lab_total");
			this.nTotalMember = 0;
			
		}
		
		// 이벤트 초기화.
		function initEventListener(){
	//3.	
			var $btnStart = $("#btn_Start");
			$btnStart.bind("click", function(){
				startTimer();

			});
			
			var $btnStop = $("#btn_Stop");
			$btnStop.bind("click",function(){
				stopTimer();
			});
			
		}
		// 0.2초에 한번씩 createNumber()함수를 실행시켜 줍니다.
		function startTimer(){	
			
			if(this.nTimerID==0){
				//입력된 참여인원수를 구해옵니다.
	//4.
				this.nTotalMember = Number(this.$labTotal.val());
				// 타이머 시작시 #panel_1의 글자색을 초기화 시켜 줍니다.
				this.resetPanelStyle();			
				this.nTimerID=setInterval(this.createNumber,20);	
			}
		}
		
		// createNumber()함수 호출하는 타이머를 멈춥니다.
		function stopTimer(){
			if(this.nTimerID){
				clearInterval(this.nTimerID);
				this.nTimerID = 0;
				//출력효과 추가.
				this.showWinner();
			}
		}
		
		// 랜덤하게 1~100 숫자를 만들어 냅니다.
		function createNumber(){	
			var nNum = 1+Math.floor(Math.random()*this.nTotalMember);
	//5.
			//만들어진 숫자를 innerHTML에 대입시켜 줍니다.
			this.$panel1.html(nNum);
	//6.
			// 폰트 크기를 100~200으로 랜덤하게 설정해줍니다.
			this.$panel1.css("fontSize", 100+(Math.random()*100));
		}
			
		// 출력효과 추가.
		function showWinner(){
	//7.		
			// 당첨자를 알리기 위해서 #panel_1의 글자색과 크기를 변경시켜줍니다.
			this.$panel1.css({color:"#ff0000",fontSize:"200px"});			
		}
	
	//8.	
		// 출력패널의 스타일을 초기화 시켜준다.
		function resetPanelStyle(){
			this.$panel1.css({color:"#000000"});	
		}
	</script>
</head>

<body>
	<div> 
		<h4>경품추첨기-ver 0.1</h4>
		<div id="panel1" > 	
		</div>

		<div id="nav">
			참여인원 : <input type="text" id="lab_total" value="100"></input>
			<button id="btn_Start">시작</button>
			<button id="btn_Stop">멈춤</button>
		</div>
   </div>
</body>
</html>
